<template>
  <div class="annual-fee-box">
    <dropdown-top></dropdown-top>
    <div class="line-box"></div>
    <div class="bank-card-box">
      <div class="item">
        <span class="span-text">附属卡选择</span>
        <div class="card-right__logo" @click="paymentFlag = !paymentFlag">
          <span>最低</span>
          <img src="@icon/arrow-b.png" alt="" />
        </div>
      </div>
    </div>
    <div class="line-box"></div>

    <div class="installment-item">
      <div class="item-box" @click="billCardFlag = !billCardFlag">
        <div class="divs item-left">付款账户</div>
        <div class="divs item-right">
          <p>￥{{ cardNum | formatCard }}</p>
          <img src="@icon/arrow-b.png" alt="" />
        </div>
      </div>
      <div class="balance-box">余额：¥{{ balance }}</div>
    </div>

    <div class="line-box"></div>
    <van-radio-group v-model="billSelect" class="payment-list">
      <van-radio
        checked-color="#00B893"
        :name="index"
        v-for="(item, index) in paymentList"
        :key="index"
      >
        <div class="installment-item">
          <div class="item-box">
            <div class="divs item-left">{{ item.leftTitle }}</div>
            <div class="divs item-right">
              <p>￥{{ item.money }}</p>
            </div>
          </div>
          <div class="balance-box" v-if="index == 1 && billSelect == 1">
            <p>
              最低还款不影响您的征信,但您将无法享受免息优惠。
              <van-icon @click="showDialog" name="info-o" color="#666666" />
            </p>
          </div>
        </div>
      </van-radio>
    </van-radio-group>
    <!--    还他人卡-->
    <div class="line-box"></div>
    <div class="bank-card-box other-bill-box">
      <div class="item" @click="_goPage('otherPayment')">
        <span class="span-text">还他人卡</span>
        <div class="card-right__logo">
          <img src="@icon/arrow-b.png" alt="" />
        </div>
      </div>
    </div>
    <div class="line-box"></div>
    <div class="tips">
      <p>温馨提示</p>
      <p>
        1.手机银行信用卡还款无需在网点柜面开通协议，目前仅支持农业银行信用卡还款服务，还款成功后实时恢复信用卡额度。
      </p>
      <p>2.手机银行信用卡还款无需。</p>
    </div>
    <div class="staging-box" @click="payNow()">确认还款</div>
    <!--  卡号选择  -->
    <van-popup
      v-model="billCardFlag"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ 'min-height': '17%' }"
    >
      <div class="info-list">
        <h3>付款账户</h3>
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell
              clickable
              @click="radio = index"
              v-for="(item, index) in 2"
              :key="index"
            >
              <div class="left-box">
                <div class="card-head__logo">
                  <img src="@icon/logo-g.png" alt="" />
                </div>
                <div class="card-box">
                  <p>{{ cardNum | formatCard }}</p>
                  <p class="text-gray">可用余额： ¥{{ balance }}</p>
                </div>
              </div>
              <template #right-icon>
                <van-radio checked-color="#00B893" :name="index" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div class="bank-card-box">
          <div class="item" @click="_goPage('addCard')">
            <span class="span-text">添加本行借记卡</span>
            <div class="card-right__logo">
              <img src="@icon/arrow-b.png" alt="" />
            </div>
          </div>
        </div>
        <div class="bank-card-box">
          <div class="item" @click="deleteCard">
            <span class="span-text">删除借记卡</span>
            <div class="card-right__logo">
              <img src="@icon/arrow-b.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="staging-box" @click="_goPage('paymentSuccess')">确定</div>
    </van-popup>

    <!--  信息确认  -->
    <van-popup
      v-model="paymentFlag"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ 'min-height': '17%' }"
    >
      <div class="info-list">
        <h3>开通约定还款</h3>
        <p>
          <span>付款账户</span>
          <span>{{ cardNum | formatCard }}</span>
        </p>
        <p>
          <span>付款金额</span>
          <span>全额</span>
        </p>
      </div>
      <div class="staging-box">确定开通自动还款</div>
    </van-popup>
    <!--  还款约定  -->
    <van-popup
      v-model="infoConfirmFlag"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ 'min-height': '17%' }"
    >
      <div class="info-list">
        <h3>还款详情</h3>
        <p>
          <span>付款账户</span>
          <span>{{ cardNum | formatCard }}</span>
        </p>
        <p>
          <span>还款账户</span>
          <span>{{ cardNum | formatCard }}</span>
        </p>
        <p>
          <span>还款金额</span>
          <span>¥{{ total }}</span>
        </p>
      </div>
      <div
        class="staging-box"
        @click="
          _goPage('paymentSuccess', {
            type: 'billRepaySuccess',
            cardNum: cardNum
          })
        "
      >
        确定
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Random } from "mockjs";
import { globalMethods } from "../common/mixins.js";
import dropdown from "@comp/dropdown";
import dropdownMenu from "@comp/dropdown/dropdownMenu";
import dropdownTop from "@comp/dropdownTop";
import text from "./text";

export default {
  name: "annualFee",
  mixins: [globalMethods],
  data() {
    return {
      billCardFlag: false,
      radio: "1",
      infoConfirmFlag: false,
      paymentFlag: false,
      cardNum: Random.string("number", 12),
      total: Random.natural(10, 100),
      residue: Random.natural(10, 100),
      balance: Random.natural(10, 100),
      date: Random.date("yyyy/MM/dd"),
      year: Random.date("yyyy"),
      bankCardList: [
        { cardNumber: "6688****6088" },
        { cardNumber: "6688****6088" },
        { cardNumber: "6688****6088" },
        { cardNumber: "6688****6088" }
      ],
      dropDownFlag: false,
      billSelect: 0,
      paymentList: [
        { leftTitle: "全额还款", money: Random.natural(10, 1000) },
        { leftTitle: "最低还款", money: Random.natural(10, 100) },
        {
          leftTitle: "自定义还款",
          money: Random.natural(10, 1000),
          showInput: true
        }
      ],
      text: text
    };
  },
  components: {
    dropdown,
    dropdownMenu,
    dropdownTop
  },
  created() {},
  methods: {
    showDialog() {
      this.$dialog
        .alert({
          confirmButtonColor: "#FFA900",
          title: "温馨提示",
          message: `${this.text}`
        })
        .then(() => {
          // on confirm
        });
    },
    deleteCard() {
      this.$dialog
        .confirm({
          confirmButtonColor: "#FFA900",
          title: "温馨提示",
          message: `确定删除付款账户（卡号:${this.cardNum}）吗？`
        })
        .then(() => {
          // on confirm
          this._goPage("deleteSuccess");
        })
        .catch(() => {
          // on cancel
        });
    },
    close(e) {
      this.dropDownFlag = e;
    },
    payNow() {
      this.infoConfirmFlag = !this.infoConfirmFlag;
    }
  }
};
</script>

<style lang="stylus" scoped>

.left-box
  display flex
  align-items center
  .card-head__logo
    width 48px
    height 48px
  .card-box
    //padding-left 32px
    width 100%
    p
      border none
      height auto

.info-list
  h3
    font-weight: 400
    display flex
    align-items center
    justify-content center
    height 100px
    color #666
    border-bottom 1px solid #E6E6E6

  p
    margin 0 30px
    display flex
    align-items center
    height 90px
    color #333333
    font-size 32px
    border-bottom 1px solid #E6E6E6
    justify-content space-between
  .bank-card-box
    .item
      border-bottom 1px solid #ededed
      .card-right__logo
        width 48px
.dropdown-menu
  top 0

.annual-fee-box
  display flex
  width 100%
  flex-direction column
  background #F7F7F7
  min-height 100vh
  color #333

  .bank-card-box
    position relative
    background #fff
    font-size 32px

    .item
      display flex
      align-items center
      padding 0 27px 0 33px
      height 90px
      color #333333

      .span-text
        flex 1

        &.active
          color #07B7A0

  .card-right__logo
    width 128px
    height 48px
    display flex
    justify-content center
    margin-left 16px
    color #999999
   span
      line-height 1.5
    img
      width 48px
      height 100%

    .img2
      width 22px
      height 16px

  .line-box
    height 20px
    background #F7F7F7

.divider-box
  background #fff
  display flex
  color #07B7A0
  font-size 32px
  align-items center
  line-height 24px
  border-color #07B7A0
  border-style solid
  border-width 0
  padding 30px 200px

  p
    position relative
    display flex
    align-items center
    justify-content center
    padding 0 30px

    &:after
      content ''
      position absolute
      width 12px
      height 12px
      border-radius 50%
      left 6px
      background #00B893

    &:before
      content ''
      position absolute
      width 12px
      height 12px
      border-radius 50%
      right 6px
      background #00B893

  &:after
    content ''
    display block
    -webkit-box-flex: 1
    -webkit-flex: 1
    flex: 1
    box-sizing: border-box
    height: 1px
    border-color: inherit
    border-style: inherit
    border-width: 1px 0 0

  &:before
    content ''
    display block
    -webkit-box-flex: 1
    -webkit-flex: 1
    flex: 1
    box-sizing: border-box
    height: 1px
    border-color: inherit
    border-style: inherit
    border-width: 1px 0 0

.standard-box
  background #fff
  display flex
  justify-content center
  align-items center
  font-size 32px
  padding: 30px 0

  .s-b
    display flex
    flex-direction column
    align-items center
    width 100%

    p
      &:last-of-type
        padding-top 30px
        font-size 26px
        color #999

  .s-l-1
    border-right 1px solid #E6E6E6

    .top-t
      color #00B893

      span
        &:first-of-type
          font-size 58px
          margin-right 15px

  .s-r-1
    .top-t
      height 64px
      display flex
      align-items center


.installment-item
  background #fff
  display flex
  flex-direction column
  font-size 32px
  min-height 90px
  padding 0 30px
  color #333

  .item-box
    height 90px
    display flex
    justify-content space-between
    align-items center
    border-bottom 1px solid #E6E6E6
    line-height 1.5

    .item-right
      display flex

      img
        width 48px
        height 100%

    .right-text
      color #666666

    .discount-box
      margin-left 16px
      font-size 26px
      color #00B893
      display flex
      height 40px
      padding 0 11px
      background #FFFFFF
      border 2px solid #00B893
      border-radius 20px
      align-items center
      justify-content center

  .balance-box
    font-size 28px
    display flex
    align-items center
    justify-content flex-end
    height 64px
    color #666666
    padding 18px 0

.protocol-box
  display flex
  align-items center
  padding 30px 34px
  font-size 28px
  background #f7f7f7

.tips
  background #fff
  font-size 28px
  padding 30px

  p
    line-height 1.5

.staging-box
  display flex
  width 686px
  height 88px
  background #FFA900
  border-radius 8px
  color #fff
  font-size 36px
  align-items center
  justify-content center
  margin 30px auto

/deep/ .van-radio__label
  width 100%


/deep/ .van-radio__icon
  align-self flex-start
  margin-top 26px

.payment-list
  display flex
  flex-direction column
  padding 0 30px
  background #fff

  .installment-item
    padding 0

  .installment-item .item-box
    border 0

  .balance-box
    color #00B893
    font-size 24px

    p
      display flex
      align-items center

.other-bill-box
  display flex
  justify-content center
  color #00B893

  .item
    color #00B893 !important

  .span-text
    flex none !important

  .card-right__logo
    width 48px
</style>
